$(function () {
    //需求1:定义校验规则
    let form = layui.form
    //form对象中有一个方法verify专门定义
    //参数是对象类型:属性是规则名称
    form.verify({
        nickname: [
            /^[\S]{1,10}$/,
            '昵称的长度为1-10个字符，且不能出现空格'
        ]
    })

    // 需求2:获取用户信息,并渲染到form表单中  封装成函数，后面还要用
    let layer = layui.layer
    initUserInfo();
    function initUserInfo() {
        axios({
            url: '/my/userinfo',
            method: 'get',
        }).then(({ data: res }) => {
            //成功回调
            // console.log(res)
            //响应失败
            if (res.status != 0) {
                //返回 弹出错误信息
                return layer.msg(res.message)
            }
            // 根据官网,为form表单赋值
            // 内置模块->表单->表单赋值/取值
            form.val("formUserInfo", res.data)
        });
    }
    //3.需求：重置功能 触发表单的重置功能 重新渲染表单页面
    // $('form').on('reset',function(e) { })
    $('#btnReset').on('click', function (e) {
        e.preventDefault()
        //重新渲染表单
        initUserInfo();
    })

    // 4.需求 提交按钮  发起ajax请求 更新用户信息
    $('form').on('submit', function (e) {
        e.preventDefault()
        //发送ajax
        axios({
            url: '/my/userinfo',
            method: 'POST',
            data: $(this).serialize()
        }).then(({ data: res }) => {
            //判断业务状态码
            // console.log(res);
            if (res.status !== 0) {
                // 如果返回失败 提示失败信息
                return layer.msg(res.message)
            }
            //成功:提示
            layer.msg('恭喜您,修改用户信息成功')

            //更新index页面的头像和用户信息
            //调用index.js里的封装的方法
            //直接调用无效 因为不是一个window对象
            window.parent.getUserInfo()
        })
    })
})